<template>
    <div class="menu">
        <div class="silder-nav">
            <van-sidebar v-model="activeKey" @change="onChange">
                <van-sidebar-item :title="item.categories" v-for="item in categoryList" :key="item.id" />
            </van-sidebar>
        </div>



        <div class="content">
            <div class="commodity-list">
                <div class="commodity-item" v-for="item in categoryList[activeKey].commodityList" :key="item.id">
                    <div class="image">
                        <img :src="item.img">
                    </div>
                    <div class="commodity-info-box">
                        <div class="commodity-name">{{ item.name }}</div>
                        <div class="commodity-sales">
                            <span>月售{{ item.monthSales }}</span>
                            <span style="margin-left:10px;">好评率{{ item.likeRate }}%</span>
                        </div>
                        <div class="price-box">
                            <span>
                                <span class="price">￥{{ item.price }}</span>
                            </span>

                            <van-button round type="info" size="mini" @click="addCommodityList(item)">
                                <span style="font-size:20px;">+</span>
                            </van-button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['categoryList', 'cartCommodityList'],
    data() {
        return {
            commodityList: [],
            activeKey: 0,

        }
    },
    created() {
    },
    methods: {
        addCommodityList(item){
            this.$emit('addCommodityList', item)
        },
        onChange(index) {
        },
    }
}
</script>

<style>
.menu .van-sidebar-item--select::before {
    background-color: rgba(255, 255, 255, 0);
}
</style>

<style scoped>
.menu {
    display: flex;

    margin-top:10px;
}

.menu .silder-nav {
    height: 90vh;
    width: 30%;

    overflow-x: visible;
    overflow-y: hidden;

    position: sticky;
    top:70px;
}

.menu .content {
    background-color: white;
    ;
    width: 100%;

    padding: 10px;

    overflow-y:scroll;

}

.commodity-item {
    display: flex;

    margin-top: 20px;
}

.commodity-item .image{
    height: 80px;
    width: 80px;
}

.commodity-item .image img {
    height: 100%;
    width: 100%;
    border-radius: 8px;
}

.commodity-item .commodity-info-box {
    margin-left: 10px;
}

.commodity-info-box {
    flex:1;
}

.commodity-info-box .commodity-name {
    font-size: 16px;
    font-weight: 1000;
}

.commodity-info-box .commodity-sales {
    color: gray;
}

.price-box {
    display: flex;
    justify-content: space-between;
}

.discount-price {
    color: red;
    font-weight: 1000;
    font-size: 14px;

    margin-right: 5px;
}

.price {
    text-decoration-line: line-through;
    color: gray;
}
</style>